<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Demo - Gitee::Frontend</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/site.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/container.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/image.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/loader.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/dimmer.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/label.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/card.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/button.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/dropdown.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/icon.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/form.css">
  <link rel="stylesheet" type="text/css" href="assets/stylesheets/gitee-frontend.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/dropdown.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js"></script>
  <script type="text/javascript" src="assets/javascripts/gitee-frontend.js"></script>
  <style>
    .filtered-search-token[data-key="labels"] .ui.label {
      display: none;
    }
    .boards-list {
      height: 640px;
      padding-bottom: 1em;
      margin-bottom: 2rem;
    }
  </style>
</head>
<body>

  <div class="ui container">
    <h1>Gitee::Frontend</h1>
    <h2>筛选搜索框</h2>
    <div class="ui form">
      <div class="field">
        <label>输入</label>
        <div id="js-search-box"></div>
      </div>
      <div class="field">
        <label>输出</label>
        <textarea id="js-search-box-data" rows="16"></textarea>
      </div>
    </div>
    <h2>任务看板</h2>
    <div id="js-boards"></div>
    <h2>成员任务看板</h2>
    <div id="js-member-boards"></div>
  </div>

<script>
  var options = {
    text: {
      loading: '载入中...',
      searchHelp: '按回车键或点击此处搜索',
      selectOtherFilter: '选择其它筛选条件',
      placeholder: '搜索或过滤结果...',
      history: '搜索历史',
      clearHistory: '清除搜索历史'
    },
    groups: [
      {
        name: '分组',
        keys: ['project_path', 'milestone_id', 'labels']
      }
    ],
    filters: [{
      name: '任务类型',
      key: 'type_id',
      icon: 'icon calendar check outline',
      items: [
        {
          name: '需求',
          value: 1
        }, {
          name: '开发',
          value: 2
        }, {
          name: '缺陷',
          value: 3
        }
      ]
    }, {
      name: '负责人',
      key: 'assignees',
      icon: 'icon user',
      multiple: true,
      none: {
        name: '无负责人',
        value: 0
      },
      searchOption: {
        key: 'visitor',
        searchTip: '请输入关键词搜索访客',
        fetcher: function (keywords, onSuccess, onError) {
          $.ajax({
            url: `https://gitee.com/api/v5/search/users?q=${keywords}`
          }).done(onSuccess).fail(onError)
        },
        converter: function (users) {
          return users.map(user => ({
            image: user.avatar_url,
            description: ' ' + user.login,
            name: user.name,
            keywords: user.login,
            value: user.login,
            key: 'visitor'
          }))
        }
      },
      tabs: [
        {
          name: '项目成员',
          key: 'project',
          active: 'active'
        },
        {
          name: '企业成员',
          key: 'ent',
          active: ''
        },
        {
          name: '访客',
          key: 'visitor',
          active: ''
        }
      ],
      remote: [{
        key: 'project',
        url: '',
        params: function (data) {
          var namespace = 'oschina/git-osc'
          if (data.project_path && data.project_path !== '0') {
            namespace = data.project_path
          }
          return {
            namespace: namespace
          }
        },
        fetcher: function (config, onSuccess, onError) {
          $.ajax({
            url: 'https://gitee.com/api/v5/repos/' + config.data.namespace + '/collaborators'
          }).done(onSuccess).fail(onError)
        },
        converter: function (users) {
          return users.map(user => ({
            image: user.avatar_url,
            description: ' ' + user.login,
            name: user.name,
            keywords: user.login,
            value: user.login,
            key: 'project'
          }))
        }
      }, {
        key: 'ent',
        url: '',
        fetcher: function (config, onSuccess, onError) {
          $.ajax({
            url: 'https://gitee.com/api/v5/repos/newgateway/xdh-map/collaborators'
          }).done(onSuccess).fail(onError)
        },
        converter: function (users) {
          return users.map(user => ({
            image: user.avatar_url,
            description: ' ' + user.login,
            name: user.name,
            keywords: user.login,
            value: user.login,
            key: 'ent'
          }))
        }
      }]
    }, {
      name: '项目',
      key: 'project_path',
      icon: 'icon book',
      none: {
        name: '未关联项目',
        value: 0
      },
      remote: {
        url: 'https://gitee.com/api/v5/enterprises/oschina/repos',
        params: {
          type: 'public'
        },
        converter: function (projects) {
          return projects.map(function (project) {
            return {
              name: project.name,
              value: project.full_name
            }
          })
        }
      }
    }, {
      name: '里程碑',
      key: 'milestone_id',
      icon: 'icon flag',
      requires: ['project_path'],
      none: {
        name: '无里程碑',
        value: 0
      },
      remote: {
        url: '',
        params: function (data) {
          return {
            project_path: data.project_path
          }
        },
        fetcher: function (config, onSuccess, onError) {
          if (typeof config.data.project_path === 'undefined') {
            onError()
            return
          }
          $.ajax({
            url: 'https://gitee.com/api/v5/repos/' + config.data.project_path + '/milestones'
          }).done(onSuccess).fail(onError)
        },
        converter: function (milestones) {
          return milestones.map(m => ({
            name: m.title,
            value: m.id
          }))
        },
      }
    }, {
      name: '标签',
      key: 'labels',
      icon: 'icon tag',
      multiple: true,
      requires: ['project_path'],
      none: {
        name: '无标签',
        value: 0
      },
      remote: {
        url: '',
        params: function (data) {
          return {
            project_path: data.project_path
          }
        },
        fetcher: function (config, onSuccess, onError) {
          if (typeof config.data.project_path === 'undefined') {
            onError()
            return
          }
          $.ajax({
            url: 'https://gitee.com/api/v5/repos/' + config.data.project_path + '/labels'
          }).done(onSuccess).fail(onError)
        },
        converter: function (labels) {
          return labels.map(label => ({
            icon: 'ui empty circular label',
            color: '#' + label.color,
            iconStyle: 'background-color: #' + label.color,
            name: label.name,
            value: label.name
          }))
        },
      }
    }, {
      name: '时间范围',
      key: 'daterange',
      icon: 'icon calendar outline',
      type: 'daterange',
      config: {
        buttonClasses: 'ui button',
        applyButtonClasses: 'primary',
        opens: 'left',
        locale: {
          format: 'YYYY.MM.DD',
          separator: ' - ',
          applyLabel: '确定',
          cancelLabel: '取消',
          fromLabel: '从',
          toLabel: '至',
          customRangeLabel: '自定义',
          weekLabel: '周',
          daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
          monthNames: [
            '一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'
          ],
          firstDay: 0
        }
      }
    }]
  }

  var $search = $('#js-search-box').filteredSearchBox(options)
  var search = $search.data('filteredsearchbox')
  var $searchData = $('#js-search-box-data')

  $search.on('change.fsb', function (e, data) {
    if (e.namespace === 'fsb') {
      $searchData.val(JSON.stringify(data, null, 2))
    }
  })
  search.callback = function (data) {
    $searchData.val(JSON.stringify(data, null, 2))
    search.addHistory(data)
  }
</script>

<script>
  var issueStates = {
    open: {
      id: 'open',
      name: '待处理',
      icon: 'icon question circle outline',
      color: '#28a745'
    },
    closed: {
      id: 'closed',
      name: '已完成',
      icon: 'icon check circle outline',
      color: '#6f4fff'
    },
    rejected: {
      id: 'rejected',
      name: '已拒绝',
      icon: 'icon ban',
      color: '#cb2431',
    }
  }
  var issueTypes = [
    {
      id: 1,
      states: ['open', 'closed', 'rejected'].map(function (state) {
        return issueStates[state]
      })
    }
  ]

  $('#js-boards').boards({
    data: [
      {
        state: 'open',
        name: '待处理',
        color: '#28a745'
      },
      {
        state: 'closed',
        name: '已完成',
        color: '#6f4fff'
      },
      {
        state: 'rejected',
        name: '已拒绝',
        color: '#cb2431',
      }
    ],
    message: {
      loading: '加载中...',
      allComplete: '以上是全部内容',
      stateDisabled: '当前任务不支持切换至此状态',
      empty: '这里没有任务'
    },
    types: issueTypes,
    user: {
      admin: true,
      id: 0
    },
    onUpdate: function (issue, oldState) {
      console.log(issue, oldState)
    },
    onLoad: function (board, callback) {
      $.ajax({
        url: 'https://gitee.com/api/v5/repos/oschina/git-osc/issues',
        data: {
          state: board.state,
          page: board.page,
          sort: 'created',
          direction: 'desc',
          per_page: 20
        }
      }).done(function (res, _stats, xhr) {
        var issues = res.map(function (issue) {
          issue.type = 1
          issue.author = issue.user
          issue.author.url = issue.author.html_url
          issue.url = issue.html_url
          return issue
        })
        callback(issues, Number(xhr.getResponseHeader('total_count')))
      })
    }
  })
</script>

<script>
  function initMemberBoards(members) {
    $('#js-member-boards').boards({
      key: 'assignee_id',
      name: 'member',
      data: members.map((m) => {
        return {
          state: m.login,
          name: m.name,
          color: '#888888',
          avatarUrl: m.avatar_url,
          colorTarget: 'background',
          issuesCount: 0
        }
      }),
      message: {
        loading: '加载中...',
        allComplete: '以上是全部内容',
        stateDisabled: '当前任务不支持切换至此状态',
        empty: '这里没有任务'
      },
      types: issueTypes,
      user: {
        admin: true,
        id: 0
      },
      plugins: {
        Sortable: Sortable
      },
      onUpdate: function (issue, oldState) {
        console.log(issue, oldState)
      },
      onLoad: function (board, callback) {
        $.ajax({
          url: 'https://gitee.com/api/v5/repos/oschina/git-osc/issues',
          data: {
            assignee: board.state,
            page: board.page,
            sort: 'created',
            state: 'all',
            direction: 'desc',
            per_page: 20
          }
        }).done(function (res, _status, xhr) {
          var issues = res.map(function (issue) {
            issue.type = 1
            issue.author = issue.user
            issue.assignee_id = issue.assignee.login
            issue.state_data = issueStates[issue.state]
            return issue
          })
          callback(issues, Number(xhr.getResponseHeader('total_count')))
        })
      }
    })
  }

  $.ajax({
    url: 'https://gitee.com/api/v5/repos/oschina/git-osc/collaborators'
  }).done(initMemberBoards)
  
</script>
</body>
</html>